import TinyReact from './TinyReact';

const root = document.getElementById('root');

// jsx，执行的时候会被 babel转义，执行 TinyReact.createElement() 方法进行转换
const virtualDOM = (
  <div className="container">
    <h1>你好 Tiny React</h1>
    <h2 data-test="test">(编码必杀技)</h2>
    <div className="test">
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h3>(观察: 这个将会被改变)</h3>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段内容</span>
    <button onClick={() => alert('你好')}>点击我</button>
    <h3>这个将会被删除</h3>
    2, 3
    <input type="text" value="13" />
  </div>
);

const modifyDOM = (
  <div className="container">
    <h1>你好 Tiny React</h1>
    <h2 data-test="test123">(编码必杀技)</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h6>(观察: 这个将会被改变)</h6>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段被修改过的内容</span>
    <button onClick={() => alert('你好！！！')}>点击我</button>
    2, 3
    <input type="text" value="13" />
  </div>
);

// 1. 转换后的 virtualDOM
// console.log('virtualDOM==>', virtualDOM);

// 2. 将 virtualDOM 添加到页面中
// TinyReact.render(virtualDOM, root);

// 3. 渲染函数组件
function Demo() {
  return <div>hello</div>;
}

function Heart(props) {
  return (
    <div>
      {props.title}
      &hearts; <Demo></Demo>
    </div>
  );
}
// TinyReact.render(<Heart title="haha" />, root);

// 4. 渲染类组件
// class Alert extends TinyReact.Component {
//   constructor(props) {
//     super(props);
//   }
//   render(props) {
//     return <div>Alert:{this.props.name}</div>;
//   }
// }
// TinyReact.render(<Alert name="zhangsan" />, root);

// 5. diff
// TinyReact.render(virtualDOM, root);
// setTimeout(() => {
//   TinyReact.render(modifyDOM, root);
// }, 2000);

// 6. 实现类组件的更新
// class Alert extends TinyReact.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       title: 'haha',
//     };
//     this.changeTitle = this.changeTitle.bind(this);
//   }
//   changeTitle() {
//     this.setState({ title: 'xixi' });
//   }
//   render(props) {
//     return (
//       <div>
//         <h1>Alert:{this.state.title}</h1>
//         <button onClick={this.changeTitle}>点击</button>
//       </div>
//     );
//   }
// }
// TinyReact.render(<Alert />, root);

// 7. 更新不是同一个组件的情况
class Alert extends TinyReact.Component {
  constructor(props) {
    super(props);
  }
  render(props) {
    return <div>Alert:{this.props.name}</div>;
  }
}
// TinyReact.render(<Alert name="zhangsan" />, root);
// setTimeout(() => {
//   TinyReact.render(<Alert name="lisi" />, root);
//   // TinyReact.render(<Heart title="haha" />, root);
// }, 2000);

class DemoRef extends TinyReact.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('input==>', this.input.value);
    console.log('alter==>', this.alter);
  }
  render() {
    return (
      <div>
        <input type="text" ref={(input) => (this.input = input)} />
        <button onClick={this.handleClick}>点击</button>
        <Alert name="lisi" ref={(alter) => (this.alter = alter)}></Alert>
      </div>
    );
  }
}
TinyReact.render(<DemoRef />, root);
